<template>
    <div class="">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="600px"
                :close-on-click-modal="false"
                @close="close"
        >
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.trim="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="所属区域" prop="areaId" :required="true">
                    <el-select v-model="form.areaId" placeholder="请选择">
                        <el-option
                                v-for="item in qyOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="桌位类型" prop="typeId" :required="true">
                    <el-select v-model="form.typeId" placeholder="请选择">
                        <el-option
                                v-for="item in typeOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="桌台编号" prop="name" :required="true">
                    <el-input v-model.trim="form.name" autocomplete="off" placeholder="例如：A00,D00,Y00"></el-input>
                    <div class="yb_margin lh16">例：桌台名称前缀为A00，序号为1-4，将批量添加4个A桌，桌台名称分别为：A001、A002、A003、A004</div>
                </el-form-item>
                <el-form-item label="桌台名称序号" prop="startNum" :required="true">
                    <div class="flex">
                        <el-input v-model.trim="form.startNum" autocomplete="off" placeholder="开始序号" style="width: 160px"></el-input>
                        <span class="mar_lr5">至</span>
                        <el-input v-model.trim="form.endNum" autocomplete="off" placeholder="结束序号" style="width: 160px"></el-input>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {getArea,getType,batchTable} from "@/api/instore";

    export default {
        name: "meteriaSave",
        created() {
        },
        data() {
            return {
                form: {
                    id: '',
                    sort: '1',
                    name: "",
                    areaId: '',
                    typeId: '',
                    startNum: '',
                    endNum: '',
                },
                qyOptions:[],
                typeOptions:[],
                title: "",
                dialogFormVisible: false,
            }
        },
        components: {},
        methods: {
            showEdit(row) {
                if (!row) {
                    this.title = "批量新增";
                } else {
                    this.title = "编辑";
                    // this.form = Object.assign({}, row);
                }
                this.getArea()
                this.getType()
                this.dialogFormVisible = true;
            },
            setStoreId(storeId){
                this.form.storeId = storeId
            },
            async getArea() {
                const {data} = await getArea({storeId:this.form.storeId});
                this.qyOptions = data ? data : []
            },
            async getType() {
                const {data} = await getType({storeId:this.form.storeId});
                this.typeOptions = data ? data : []
            },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            save() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        const {msg} = await batchTable(this.form);
                        this.$baseMessage(msg, "success");
                        this.$emit("fetchData");
                        this.close();
                    } else {
                        return false;
                    }
                });
            },
        }
    };
</script>
